<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef">
      <el-form-item label="模型信息" prop="id">
        <el-input
          v-model="queryParams.id"
          placeholder="模型id"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" size="mini" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <div class="layout-content">
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="
          tableData.filter(
            (data) =>
              !search || data.name.toLowerCase().includes(search.toLowerCase())
          )
        "
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
      > 
        <!-- <el-table-column
          type="selection"
          width="55"
          class="selection"
          align="center"
        /> -->
        <el-table-column label="模型id" prop="id" width="100px" align="center">
        </el-table-column>

        <el-table-column
          label="模型图片"
          prop="img"
          width="100px"
          align="center"
        >
          <template #default="scope">
            <img :src="scope.row.img" alt="" style="margin: 0 auto" />
          </template>
        </el-table-column>

        <!-- <el-table-column
          label="创建时间"
          align="center"
          prop="createTime"
          width="180"
        >
          <template #default="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column> -->

        <el-table-column label="模型名字" prop="name" align="center" />
        <el-table-column label="作者" prop="maker" align="center" />
        <el-table-column
          label="顶点"
          prop="maker"
          width="100px"
          align="center"
        />
        <el-table-column
          label="三角"
          prop="maker"
          width="100px"
          align="center"
        />

        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          min-width="300px"
        >
          <template #default="scope">
            <el-button
              size="mini"
              type="text"
              icon="Tickets"
              @click="openModelInfoDialog(scope.row)"
              v-hasPermi="['system:role:edit']"
              >模型详情</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="Paperclip"
              @click="handleDelete(scope.row)"
              v-hasPermi="['system:role:remove']"
              >归属追踪</el-button
            >
            <el-dropdown
              size="mini"
              @command="(command) => handleCommand(command, scope.row)"
            >
              <span class="el-dropdown-link">
                <el-icon><d-arrow-right /></el-icon>更多
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    command="shareModel"
                    icon="CircleCheck"
                    >分享模型</el-dropdown-item
                  >
                  <el-dropdown-item
                    command="handleAuthUser"
                    icon="User"
                    >模型评论</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.current"
        v-model:limit="queryParams.size"
        @pagination="getList"
      />
    </div>

    <!-- 模型详情 -->
    <el-dialog
      :title="modelInfoDialogTitle"
      v-model="open"
      width="500px"
      append-to-body
    >
      <ul class="modelInfoDialog">
        <li>
          <span>modelId</span>
          <strong>{{ modelInfoDialog.modelId }}</strong>
        </li>
        <li>
          <span>downloadSize</span>
          <strong>{{ modelInfoDialog.downloadSize }}</strong>
        </li>
        <li>
          <span>animation</span>
          <strong>{{ modelInfoDialog.animation }}</strong>
        </li>
        <li>
          <span>pbr</span>
          <strong>{{ modelInfoDialog.pbr }}</strong>
        </li>
        <li>
          <span>texture</span>
          <strong>{{ modelInfoDialog.texture }}</strong>
        </li>
        <li>
          <span>material</span>
          <strong>{{ modelInfoDialog.material }}</strong>
        </li>
        <li>
          <span>triangle</span>
          <strong>{{ modelInfoDialog.triangle }}</strong>
        </li>
        <li>
          <span>vertex</span>
          <strong>{{ modelInfoDialog.vertex }}</strong>
        </li>
        <li>
          <span>voice</span>
          <strong>{{ modelInfoDialog.voice }}</strong>
        </li>
      </ul>
    </el-dialog>

    <!-- 模型分享 -->
    <el-dialog
      :title="modelShareDialogTitle"
      v-model="openShare"
      width="500px"
      append-to-body
    >
      <ul class="modelInfoDialog modelShareDialog">
        <el-row>
          <el-col :span="24">
            <h5>分享链接</h5>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="20">
            <el-input
              placeholder="请输入内容"
              v-model="linkContent"
              :disabled="true"
            >
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-button @click="copyLink" type="info">复制</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <h5>Share Qr code</h5>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <span class="img">
              <img src="" alt="" />
            </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <h5>Share to</h5>
          </el-col>
        </el-row>
      </ul>
    </el-dialog>
  </div>
</template>
<script setup name="modelList">
import { listModel, infoModel } from "@/api/model/list";
import { ref } from "vue";
const { proxy } = getCurrentInstance();
const search = ref("");
const total = ref("0");
const loading = ref(true);
const setButtonState = ref(false);
const setLikedButtonState = ref(false);
// 获取用户的选中
const multipleSelection = ref("");
const queryParams = reactive({
  current: 1,
  size: 10,
  id: "",
});
// 模型详情打开开关
const open = ref(false);
// 模型详情弹出框的标题
const modelInfoDialogTitle = ref("模型详情");
// 模型详情弹出框的内容
const modelInfoDialog = ref({
  modelId: "",
  downloadSize: "",
  animation: "",
  pbr: "",
  texture: "",
  material: "",
  triangle: "",
  vertex: "",
  voice: "",
});
// 重置模型详情弹出框的内容
function clearModelInfoDialog() {
  modelInfoDialog.value.modelId = "";
  modelInfoDialog.value.downloadSize = "";
  modelInfoDialog.value.animation = "";
  modelInfoDialog.value.pbr = "";
  modelInfoDialog.value.texture = "";
  modelInfoDialog.value.material = "";
  modelInfoDialog.value.triangle = "";
  modelInfoDialog.value.vertex = "";
  modelInfoDialog.value.voice = "";
}
// 模型详情弹出框的操作
function openModelInfoDialog(thisModelInfo) {
  clearModelInfoDialog();
  open.value = false;
  let id = thisModelInfo.id;
  modelInfoDialogTitle.value = id + "模型详情";
  let data = [];
  // 查询某个模型的详情
  infoModel(id)
    .then((res) => {
      data = res.data;
      modelInfoDialog.value.modelId = data.id;
      modelInfoDialog.value.downloadSize = "";
      modelInfoDialog.value.animation = "";
      modelInfoDialog.value.pbr = "";
      modelInfoDialog.value.texture = "";
      modelInfoDialog.value.material = "";
      modelInfoDialog.value.triangle = "";
      modelInfoDialog.value.vertex = "";
      modelInfoDialog.value.voice = "";
    })
    .catch((err) => {
      clearModelInfoDialog();
    });
  open.value = true;
}
// 分享
// 模型分享打开开关
const openShare = ref(false);
// 模型分享的标题
const modelShareDialogTitle = ref('模型分享')
function shareModel(row) {
  console.log('row',row);
  modelShareDialogTitle.value = row.title + '模型分享';
  openShare.value = true;
}

/** 更多操作 */
function handleCommand(command, row) {
  switch (command) {
    case "shareModel":
      shareModel(row);
      break;
    case "handleAuthUser":
      handleAuthUser(row);
      break;
    default:
      break;
  }
}


// 模型数据列表
const tableData = ref([]);
// 获取模型数据列表
function getList() {
  loading.value = true;
  listModel(queryParams).then((response) => {
    console.log("response.data", response.data);
    total.value = response.data.total;
    tableData.value = response.data.records;
    loading.value = false;
  });
}

getList();

function handleDelete(index, rows) {
  rows.splice(index, 1);
}

function cancelEvent(index, rows) {
  console.log("取消了");
}

const handleWeekClose = (index, rows) => {
  proxy.$modal
    .confirm("确认要取消该模型的周推荐吗?")
    .then(() => {
      rows.state = false;
      proxy.$modal.msgSuccess("成功操作");
    })
    .catch(function () {});
};
function handleRecommendClose(index, rows) {
  proxy.$modal
    .confirm("确认要取消该模型的喜欢推荐吗?")
    .then(() => {
      rows.state = false;
      proxy.$modal.msgSuccess("成功操作");
    })
    .catch(function () {});
}

// 设置标签
function setLikedRecommend(index, rows) {
  rows.state2 = true;
}
function setWeekRecommend(index, rows) {
  rows.state = true;
}

// 判断是否有选中项
function handleSelectionChange(value) {
  multipleSelection.value = value;
}

// 多选操作周推荐
function selectWeekAllcc() {
  multipleSelection.value.forEach((item) => {
    if (item.state) {
      item.state = false;
    } else {
      item.state = true;
    }
  });
}
function selectLikedAllcc() {
  multipleSelection.value.forEach((item) => {
    if (item.state2) {
      item.state2 = false;
    } else {
      item.state2 = true;
    }
  });
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.current = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  getList();
}

</script>
<style lang="scss">
.layout-content {
  .table-bottom {
    position: relative;
    margin-top: 50px;
    .setButton {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;

      width: 100px;
      text-align: center;
    }
    .setLikedButton {
      position: absolute;
      top: 0;
      left: 110px;
      display: flex;
      justify-content: center;

      width: 100px;
      text-align: center;
    }
  }
}
.modelInfoDialog {
  position: relative;
  margin-top: -30px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  padding: 30px 0;
  @media screen and (max-width: 1024px) {
    padding: 15px 0;
  }
  li {
    padding: 12px 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    display: flex;
    justify-content: space-between;
    span,
    strong {
      display: block;
    }
  }
}
.modelShareDialog {
  h5 {
    font-size: 16px;
  }
  .el-row {
    margin-bottom: 15px;
    .img {
      padding: 5px;
      box-sizing: border-box;
      background-color: #fff;
      img {
        max-width: 100%;
        height: auto;
        max-width: 150px;
      }
    }
  }
}
</style>
